Vue.component('myheader', {
    props:["arr"],//自定义模板组件中只能访问这里声明过得变量
    template: `
    <header class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img alt="Brand" src="images/logo.png">
                    </a>
                </div>
                <!--分类开始-->
                <ul class="nav navbar-nav">
                    <li><a href="/">首页</a></li>
                    <!--此处的arr是无法直接访问到vue对象里面的arr数组
                    需要做一个传值操作-->
                    <li v-for="c in arr"><a :href="'/index.html?cid='+c.id">{{c.name}}</a></li>
                    <li>
                        <form action="">
                            <input v-model="wd" type="text" placeholder="Search">
                            <button type="button" @click="search()"><i class="fa fa-search"></i></button>
                        </form>
                    </li>
                </ul>
                <!--分类结束-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" @click="admin()">管理员入口</a></li>
                </ul>
            </div>
        </nav>
    </header>
    `,
    data: function () {
        return {
             wd: ""
        }
    },
    methods: {
        search: function () {
            //跳转到首页 并传递过去搜索的关键字
            location.href = "/index.html?wd=" + this.wd;
        },
        admin: function () {
            //发送请求检查是否登入过
            axios.get("/checkLogin").then(function (response) {
                if (response.data == "") {//未登入
                    location.href = "/login.html"
                } else {//登入过
                    location.href = "/admin.html"
                }
            })
        }
    }
})

let header_v = new Vue({
    el: "myheader",
    data:{
      arr:[]
    },
    created: function () {
    //发请求获取所有分类信息
    axios.get("/category/select").then(function (response) {
        //this.arr访问的是当前自定义模板组件data里面的arr数组变量
        header_v.arr = response.data;

    })
}

})